<template>
	<div class="task-preview-container">
		<div class="task-details">
			<div class="task-info">
				<span class="info-label">编程语言:</span>
				<span class="info-value">Java</span>
			</div>
			<div class="task-info">
				<span class="info-label">模块名称:</span>
				<span class="info-value">基础知识</span>
			</div>
			<div class="task-info">
				<span class="info-label">难易程度:</span>
				<span class="info-value">中等题</span>
			</div>
		</div>
		<div class="task-content">
			【接口】创建一个接口 Bank，它包含方法 void deposit(double amount) 和 void withdraw(double amount)。
			然后创建一个类 SavingsAccount，它实现了 Bank 接口，并实现了存款和取款的方法。接着创建一个名为 BankCustomer 的类，
			它包含一个名为 account 的 Bank 接口类型的属性，以及一个方法 void transaction(double amount)，
			在该方法中调用 account 的存款和取款方法。
<pre><code>public static void main(String[] args){
    System.out.println("hello world!");
}</code></pre>
		</div>

		<!-- 任务答案和列表 -->
		<div class="flex gap-2 task-code-list">
			<el-check-tag checked type="primary" @change="">张三</el-check-tag>
			<el-check-tag>李四</el-check-tag>
			<el-check-tag>王五</el-check-tag>
			<el-check-tag>赵六</el-check-tag>
			<el-check-tag disabled>陆奇</el-check-tag>
		</div>
		<!-- 显示任务答案 -->
		<pre class="task-answer"><code>
import base64

def convert_url_to_thunder(url):

    thunder_format = f"AA{url}ZZ"
    thunder_format_bytes = thunder_format.encode('utf-8')
    # 使用 Base64 编码
    encoded_bytes = base64.b64encode(thunder_format_bytes)
    # 将编码后的字节串转换为字符串
    encoded_str = encoded_bytes.decode('utf-8')
    # 转换后的地址与迅雷前缀构成最终的迅雷地址
    thunder_url = f"thunder://{encoded_str}"

    return thunder_url


# 测试示例
url = "http://www.baidu.com"
thunder_url = convert_url_to_thunder(url)
print(thunder_url)</code>
		</pre>
		
	</div>
	
	
</template>

<script>

import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import TaskCode from '@/components/TaskCode.vue'

export default {
	components: {
		HeaderNav,
		TaskContainer,
		TaskCode,
	},
	data() {
		return {
			active: 0 ,
			task: {
				checked: false,
				code: "" ,
			}
		}
	}
}
</script>

<style scoped>
.task-preview-container {
	margin: 0 auto;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	height: 700px;
	overflow: auto;
	position: relative;
}

.task-header {
	text-align: center;
	margin-bottom: 20px;
}

.task-title {
	font-size: 28px;
	font-weight: bold;
	color: #333;
}

.task-details {
	display: flex;
	justify-content: space-between;
	line-height: 40px;
	background-color: #fff;
	margin-bottom: 10px;
	border-radius: 8px;
}

.task-info {
	flex: 1;
	text-align: center;
}

.info-label {
	font-weight: bold;
	color: #555;
	margin-right: 10px;
}

.info-value {
	color: #777;
}

.task-content {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-content pre:has(>code) {
	background: #F0F2F5;
	color: #333;
	padding: 10px;
	border-radius: 5px;
	overflow-x: auto;
}
.task-content code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 14px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.task-code-list {
	padding: 20px 0 ;
}

.task-answer {
	background-color: #fff;
    padding: 10px 20px ;
    border-radius: 5px;
    overflow-x: auto;
    line-height: 1.5;
    margin: 10px 0;
    tab-size: 3;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-answer > code {
	font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.1;
}

.el-check-tag {
	margin: 0 3px;
	background-color: #e9e9eb;
}

.el-check-tag[disabled]{
	background-color: #f4f4f5;
}

.el-check-tag[disabled]:hover {
	cursor: not-allowed;
}
</style>